<template>
	<view class="page-wrap" :data-theme="theme" :class="theme" :style="globalColor.style">
		<header-custom title="成绩详情" />
		<view v-if="dataList.length">
		<!-- <view class="countSroceTips fboxRow Ycenter Xcenter font24 color-9899A1 bg-F5F5FA">
		  <view class="flex1">您总共查询到 {{examList.length}} 场考试 <text style="color:#C8C8CC" class="bksCIcon bks-c-ziyuan39jieshi font24" bindtap="tipsClick"></text></view>
		  <text class="right color-00C15D" data-tag="score" bindtap="pageTo">选择考试</text>
		</view> -->
		<block v-for="(item, index) in dataList" :key="index">
		<view class="item-score">
		  <view class="hd fboxRow Ycenter" :style="{color:colorList[index]}" v-if="index == 0">
		    <view class="flex1 fboxRow Ycenter" data-tag="score">
		      <text class="icon bksCIcon bks-c-ziyuan108kaoshi color-fff font22"></text>
		      <view class="tit font24">{{examInfo.examName}}
		        <!-- <text style="margin-left:10rpx;color:#C8C8CC" class="bksCIcon bks-c-ziyuan82qiehuan font24"></text> -->
		      </view>
		    </view>
		    <!-- <view class="right font22" data-tag="school" data-type="2" bindtap="pageTo">推荐院校</view> -->
		  </view>
		  <view class="hd fboxRow Ycenter" :style="{color:colorList[index]}" v-else>
		    <view class="flex1 fboxRow Ycenter">
		      <text class="icon color-fff font22" :style="{background:colorList[index]}">{{item.subjectName.slice(0, 1)}}</text>
		      <view class="tit font24">{{item.subjectName}}</view>
		    </view>
		    <!-- <view class="right font22" data-tag="{{item.subjectName}}" data-item="{{item}}" bindtap="pageTo">{{item.subjectName}}</view> -->
		  </view>
		  <view class="bd font24">
		    <view class="fboxRow">
		      <block v-for="(hItem, HIndex) in classify" :key="HIndex">
		        <view v-if="hItem.key == 'type'" class="tab color-9899A1 fboxRow Ycenter Xcenter"></view>
		        <view v-else class="tab flex1 color-9899A1 fboxRow Ycenter">{{index == 0 && hItem.key == 'subjectScore'  ? '总分' : hItem.title}}</view>
		      </block>
		    </view>
		    <block v-for="(bItem, BIndex) in item.scoreInfos" :key="BIndex">
		    <view class="fboxRow">
		      <block v-for="(hItem, HIndex) in classify" :key="HIndex">
		        <view v-if="hItem.key == 'type'" class="tab color-9899A1 fboxRow Ycenter">{{bItem[hItem.key] == 1 ? '原': '赋'}}</view>
		        <view v-else class="tab flex1 color-9899A1 fboxRow Ycenter"> <text style="margin-right:10rpx" class="color-36363A">{{bItem[hItem.key]}}</text> {{hItem.unit}}</view>
		      </block>
		    </view>
		    </block>
		  </view>
		</view>
		<view class="space-block"></view>
		</block>
		</view>
		<template v-if="dataLoading == 'loading'"><u-loadmore fontSize="24rpx" :status="dataLoading" /></template>	
		<view v-if="!dataList.length && dataLoading == 'none'" class="not fboxCol Ycenter Xcenter" :style="{height: sys.screenHeight+'rpx'}">
		  <image class="img" src="https://bks-view.obs.cn-north-4.myhuaweicloud.com:443/css/not.jpg" mode="widthFix"></image>
		  <view class="font24 mt30 color-9899A1">没有查询到您的成绩，请核对信息哦~</view>
		</view>		
	</view>
</template>

<script>
	import headerCustom from '@/pagesBKS/components/header-custom.vue';
	import {scoreEntering, bksScoreAnalysisName,isAnalysis} from '@/api/bks.volunteer.js'
	import {examScoreInfo} from '@/api/bks.examinee.js'
	export default {
		components: {
			headerCustom
		},
		data() {
			return {
				theme: 'bks-theme',
				globalColor: getApp().globalData.globalColor,
				classify: [
				  {key: 'type', title: '', change: 'scoreChange', unit: ''},
				  {key: 'subjectScore', title: '成绩', change: 'scoreChange', unit: '分'},
				  {key: 'cityRank', title: '全市', change: 'cityRankChange', unit: '名'},
				  {key: 'schoolRank', title: '本校', change: 'schoolRankChange', unit: '名'},
				  {key: 'classRank', title: '本班', change: 'classRankChange', unit: '名'}
				],
				colorList: ['#00C15D', '#FF9645', '#FFBC44', '#3480FF', '#E85531', '#00C15D', '#FFBC44'],
				subjectList:[
				  {id: 'chinese', tagName: '语文', on:true, max: 150, value:''},
				  {id: 'mathematics', tagName: '数学', on:true, max: 150, value:''},
				  {id: 'english', tagName: '英语', on:true, max: 150, value:''},
				  {id: 'physical', tagName: '物理', max: 100, value:''},
				  {id: 'history', tagName: '历史', max: 100, value:''},
				  {id: 'biological', tagName: '生物学', max: 100, value:''},
				  {id: 'chemical', tagName: '化学', max: 100, value:''},
				  {id: 'political', tagName: '思政', max: 100, value:''},
				  {id: 'geographic', tagName: '地理', max: 100, value:''},
				],
				examInfo: {
				  // "examId":"KS202101230000","examName":"后端测试1","examTime":"2021-01-23","studentCode":"UC00103STU0038316"
				},
				dataLoading: '',
				dataList: []
			}
		},
		onLoad(options) {
			if(options.examId){
			  this.examInfo = {
				  examId: options.examId,
				  examName: decodeURIComponent(options.examName),
				  examTime: options.examTime,
				  studentCode: options.studentCode
				}
			}
			this._scoreInfo()
		},
		methods: {
			_scoreInfo(){
				this.dataLoading = 'loading'
			    examScoreInfo(this.examInfo).then(res => {
				  this.dataList = res.data
				  this.dataLoading = 'none'
			    }).catch(err=>{
				  this.dataLoading = 'none'
			    })
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.head{padding:30rpx}
.avatar{position: relative;margin-right: 20rpx; width: 88rpx;height: 88rpx;}
.avatar image{width: 88rpx;height: 88rpx;border-radius: 50%;}
.avatar .iVip{position: absolute;right: 0;bottom: 0; width: 24rpx;height: 24rpx;line-height: 24rpx;border-radius: 50%;text-align: center;}

.hd{padding: 0 30rpx; height: 90rpx;}
.icon{margin-right: 12rpx;
  width: 44rpx;
height: 44rpx;
line-height: 44rpx;
text-align: center;
background: #00C15D;
border-radius: 50%;
}

.bd{padding:24rpx 0 24rpx 30rpx; border-top: 1px solid #EBEBF0;}

.tab{padding: 10rpx;height: 60rpx;overflow: hidden;}
.tab:first-child{width: 80rpx;}

.bks-c-ziyuan108kaoshi{font-size: 22rpx}
.countSroceTips{padding: 0 30rpx;height: 64rpx;}
.bottom{ height: 98rpx;}
.bottom-btn{position: fixed;left: 0;bottom:0; width: 100%;}
.bottom-btn .bksCIcon{margin-right: 10rpx;}
.bottom-btn .filter{background-color: #00C15D;}
.btn{height: 98rpx;border:0 none !important}
.btn-00C15D{border: 1px solid #00C15D !important;}


</style>